<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Mostrar listas - App Inventor para Android
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c2 {border-width:0}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende sobre App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis proyectos</a><div>(proximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/tutorials">Tutoriales</a> &gt; Mostrar listas
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Mostrar una lista
              </h1>
              <p>
                A menudo se definen listas como una variable para almacenar datos. Por ejemplo, la siguiente variable almacena numeros de teléfono.
              </p>
              <div class="imagecontainer">
                <img alt="" src="DisplayListAssets/broadcastListItems.png" width="436">
              </div>
              <p>
                Cuando se desea mostrar una lista en el teléfono, puedes conectar la propiedad Text de una etiqueta, como en este ejemplo:
              </p>
              <div class="imagecontainer">
                <img alt="" src="DisplayListAssets/simpleDisplayList.png" width="389">
              </div>
              <p>
                En el teléfono, los elementos de la lista aparecerán en BroadcastListLabel como una lista delimitada por espacios:
              </p>
              <blockquote>
                (1112222 3334444 5556666)
              </blockquote>
              <p>
                El usuario puede ver los datos, pero no es muy elegante. En general, las listas se muestran en líneas separadas o con comas que separan cada elemento.
              </p>
              <p>
                Mostrar una lista con más elegancia, es más serio - debes escribir bloques para mover los elementos de la lista en la etiqueta con el formato que 

quieras. Puedes mostrar los elementos en líneas separadas, añadir texto decorativo - casi cualquier cosa que puedas imaginar. Para mejorar una lista, utiliza un bloque 

foreach para añadir sucesivamente cada elemento de la etiqueta.
              </p>
              <p>
                Aquí hay un ejemplo que muestra el BroadcastList en líneas separadas. Los bloques se encuentran dentro de un procedimiento que puedes llamar en 

cualquier momento para modificar la lista. 
              </p>
              <div class="imagecontainer">
                <img alt="" height="299" src="DisplayListAssets/displayNumbersOnly.png" width="612">
              </div>
              <h2>
                Como funcionan los bloques
              </h2>
              <p>
                El BroadcasatListLabel.Text se inicia por primera vez a una variable, "Phone numbers...". A continuación, el bloque foreach comienza - todos los 

bloques en su interior se repetirán para cada elemento de BroadcastList. Si la lista tiene tres elementos, como en BroadcastList, los bloques dentro de foreach se 

ejecutará en tres ocasiones. Cada vez que los bloques se repiten, la variable pnumber tiene un elemento diferente en ella. La primera vez que tendrá 1112222, la 

segunda vez que tendrá 3334444, y la tercera vez que tendrá 5556666. Cada vez que se ejecuta se añade el valor pnumber hasta el final de BroadcastListLabel.Text, y se 

coloca el caracter "\n", para pasar al siguiente renglón.
              </p>
              <h3>
                Nueva linea con "\n"
              </h3>
              <p>
                Las cadenas de texto en general, consisten en letras, dígitos y signos de puntuación. Pero el texto también puede almacenar los caracteres especiales 

de control. "\n" es un carácter de control. Cuando aparece en un bloque de texto, significa "ir a la siguiente línea", es decir, un punto y aparte. Así que el texto 

"1112222\n3334444\n5556666" aparecería como:
              </p>
              <blockquote>
                1112222<br>
                3334444<br>
                5556666
              </blockquote>
              <p>
                Vamos a trazar los bloques para ver cómo el BroadcastListLabel se construye. Siguiendo los pasos para cada uno de los elementos de esta 

variable/propiedad veremos como los bloques se ejecutan. Dado que existe un foreach, vamos a considerar los valores después de cada interacción - cada vez que los 

bloques dentro del foreach se ejecutan:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Interacción
                      </td>
                      <td class="tbl-header">
                        pnumber
                      </td>
                      <td class="tbl-header">
                        PhoneListLabel.Text
                      </td>
                    </tr>
                    <tr>
                      <td>
                        Al principio
                      </td>
                      <td>
                        n/a
                      </td>
                      <td>
                        PhoneNumbers...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        Después de la primera interacción
                      </td>
                      <td>
                        1112222
                      </td>
                      <td>
                        PhoneNumbers...\n1112222
                      </td>
                    </tr>
                    <tr>
                      <td>
                        Después de la segunda interacción
                      </td>
                      <td>
                        3334444
                      </td>
                      <td>
                        PhoneNumbers...\n1112222\n3334444
                      </td>
                    </tr>
                    <tr>
                      <td>
                        Después de la tercera interacción
                      </td>
                      <td>
                        3334444
                      </td>
                      <td>
                        PhoneNumbers...\n1112222\n3334444\n5556666
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Como muestra la tabla, el bloque foreach realiza la tarea de colocar sucesivamente el siguiente elemento de la BroadcastList en la variable. En la 

primera interacción, pnumber es 1112222, 3334444 en la segunda, y en la tercera 5556666. Como ves foreach hace parte del trabajo - no tienes que establecer 

explícitamente el pnumber a uno de los elementos de la lista.
              </p>
              <p>
                Los bloques dentro del foreach añaden un "\n" y el número con el valor anterior de PhoneListLabel.Text. Así que después de cada interacción, la 

etiqueta se hace más grande y cuenta con un número más de teléfono (y una nueva línea). A finales del foreach, PhoneListLabel.Text estará establecida de manera que los 

números aparecerán como:
              </p>
              <blockquote>
                1112222<br>
                3334444<br>
                5556666
              </blockquote>
            </div>
          </div>
        </div>
      </div>
    <div class="footer">
      <div class="footer-legal">
        <p>
          <a href="http://creativecommons.org/licenses/by/3.0/" rel="license"><img alt="Creative Commons License" class="c2" 

src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
          Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by/3.0/" rel="license">Creative Commons Attribution 3.0 Unported License</a> 

.
        </p>
        <p>
          El trabajo original de Google ha sido modificado<br>
              Este trabajo ha sido traducido del Inglés al Español<br>
          <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a 

href="../../../about/termsofservice.html">Condiciones</a>
        </p>
      </div>
      <div class="footer-lastupdate">
        <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
        </script>
      </div>
     </div>
    </div>
  </body>
</html>
